<template>
  <div class="staff">
    <div class="staff-top">
       <div class="search-box">
          <el-form
            :inline="true"
            ref="search_data"
            :rules="rules"
            :model="search_data"
          >
            <el-form-item label="code:">
              <el-input type="text" v-model="search_data.code" placeholder="请输入code"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="search" @click='onSearch()'>筛选</el-button>
            </el-form-item>
          </el-form>
      </div>
        <el-form :inline="true">
            <el-form-item class="btnRight">
                  <div class="block">
                    <span class="demonstration">生效时间</span>
                    <el-date-picker
                        v-model="time"
                        type="datetimerange"
                        :picker-options="pickerOptions"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        format="yyyy-MM-dd HH:mm:ss"
                        align="right">
                    </el-date-picker>
                  </div>
                <el-button type="primary" size ="small" icon="el-icon-edit-outline" @click='onBatchAddCode()'>生成券码</el-button>
            </el-form-item>
        </el-form>
    </div>
      <div class="tables">
           <el-table
            :data="dataList.list"
            border
            style="width: 100%">
            <el-table-column
                label="券码id"
                align="center"
                width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="券码名"
                align="center"
                width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.name }}</span>
                </template>
            </el-table-column>
             <el-table-column
                 label="code"
                 align="center"
                 width="180">
               <template slot-scope="scope">
                 <span style="margin-left: 10px">{{ scope.row.code }}</span>
               </template>
             </el-table-column>
           <el-table-column
                label="状态"
                align="center"
                width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.status === 0 ? '未激活' : '已激活' }}</span>
                </template>
            </el-table-column>
             <el-table-column
                 label="生效时间"
                 align="center"
                 width="180">
               <template slot-scope="scope">
                 <span style="margin-left: 10px">{{ scope.row.startTime | moment }}</span>
                 ~
                 <span style="margin-left: 10px">{{ scope.row.endTime | moment }}</span>
               </template>
             </el-table-column>
            <el-table-column
                label="创建时间"
                align="center"
                width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.createTime | moment }}</span>
                </template>
            </el-table-column>
        </el-table>
      </div>
      <div class="page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="dataList.pageNum"
          :page-sizes="dataList.page_sizes"
          :page-size="dataList.pageSize"
          :layout="dataList.layout"
          :total="dataList.total">
        </el-pagination>
	 	  </div>
  </div>
</template>

<script>
// @ is an alias to /src
import {Message} from "element-ui";

export default {
  name: "couponCode",
  data() {
    return {
      dataList: {
        list: [],
        pageNum: 0,
        pageSize: 8,
        pages: 0,
        total: 0,
        page_sizes:[5,10,15,20], //每页显示多少条
				layout:'total, sizes, prev, pager, next, jumper'
      }, //数据存储
      form: {
        startTime: null,
        endTime: null,
      },
      num: 1,
      parameter: {
        options: [{
            id: null,
            code: null
        }],
        id: 0
      },
      search_data: {
         code: null
      },
      rules:{
         search_data:  [{ required: true, message: "code不能为空", trigger: "blur" }],
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      time: [new Date(), new Date()],
    };
  },
  methods: {
    queryList(formData) {
      this.$axios
        .post("/api/couponCode/list",formData,{headers: {"token": localStorage.getItem("eleToken")}})
        .then(res => {
          this.dataList = res.data.data;
        }).catch(err => console.log(err));
    },
    handleDelete(index, row) {
      //删除数据
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$axios.delete(`/api/news/${row.id}`)
          .then(res => {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.initQuery();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    onBatchAddCode() {
      this.form.startTime = this.time[0];
      this.form.endTime = this.time[1];
       this.$axios
          .post("/api/couponCode/batchCreate",this.form,{headers: {"token": localStorage.getItem("eleToken")}})
          .then((res) => {
            if(res.data.status === 400){
              Message.error(res.data.message)
            } else if(res.data.status === 500){
              Message.error(res.data.message)
            } else {
              this.initQuery();
            }
          }).catch(err => console.log(err));
    },
		handleSizeChange(page_size) {
				this.dataList.pageNum = 1; //第一页
				this.dataList.pageSize = page_size; //每页先显示多少数据
		},
		handleCurrentChange(page){
				// 跳转页数
				//获取每行数
				let pageSize = this.dataList.pageSize;
				const formData = {
                "isAsc": "asc",
                "orderBy": null,
                "orderByColumn": "updateTime",
                "pageNum": page,
                "pageSize": pageSize
        }
        this.queryList(formData);
		},
    onSearch(){
      this.dataList.pageNum = 1;
      const formData = {
                "isAsc": "desc",
                "orderBy": null,
                "orderByColumn": "updateTime",
                "pageNum": 0,
                "pageSize": this.dataList.pageSize,
                "code": this.search_data.code===''?null:this.search_data.code
      }
      console.log(formData);
      this.queryList(formData);
		},
    initQuery() {
      const formData = {
        "isAsc": "desc",
        "orderBy": null,
        "orderByColumn": "updateTime",
        "pageNum": 0,
        "pageSize": this.dataList.pageSize,
      }
      this.queryList(formData);
    },
  },
  created() {
    this.initQuery()
  },
  components: {
  }
};
</script>
<style scoped>
.staff {
  margin: 10px;
}
.btnRight {
  float: right;
}
</style>
